<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>淘宝首页</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        .taobao {
            width: 520px;
            height: 280px;
            margin: 100px auto;
            position: relative;
        }

        .taobao a {
            width: 24px;
            height: 36px;
            display: block;
            position: absolute;
            top: 50%;
            margin-top: -18px;
        }

        .arrow-left {
            background: url("../image/left.png");
            left: 0;
        }

        .arrow-right {
            background: url("../image/right.png");
            right: 0;
        }

        .taobao ul {
            width: 85px;
            height: 13px;
            background-color: rgba(255, 255, 255, .3);
            position: absolute;
            bottom: 18px;
            left: 50%;
            margin-left: -75px;
            border-radius: 8px;
        }

        .taobao ul li {
            width: 8px;
            height: 8px;
            margin: 3px;
            background-color: #000;
            float: left;
            border-radius: 50%;
        }

    </style>
</head>
<body>

<!--淘宝banner开始-->
<div class="taobao">
    <img src="../image/taobao.jpg">
    <a href="#" class="arrow-left"></a>
    <a href="#" class="arrow-right"></a>
    <ul>
        <li class="current"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
<!--淘宝banner结束-->

</body>
</html>